<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
</head>
<body>

<%--
    添加和修改的弹框
--%>
<form class="layui-form" lay-filter="addOrUpdate" id="addOrUpdate"  hidden>
    <input type="hidden" name="id" placeholder="请输入id" autocomplete="off" class="layui-input">
    <div class="layui-form-item">
        <label class="layui-form-label">员工编号</label>
        <div class="layui-input-inline">
            <input type="text" name="staffId" readonly placeholder="请输入员工编号" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="staffName" lay-verify="required" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">职位</label>
        <div class="layui-input-inline">
            <select name="roleId" lay-verify="required" id="selRole" lay-filter="aihao">
                <option value="">请选择职位</option>
            </select>
        </div>
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
            <select name="deptid" lay-verify="required" id="selDept" lay-filter="aihao">
                <option value="">请选择部门</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" lay-verify="password" placeholder="请输入员工登录密码" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" lay-verify="sjhm" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-inline">
            <input type="text" name="idCard" lay-verify="idCard" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">住址</label>
        <div class="layui-input-inline">
            <input type="text" name="address" lay-verify="required" placeholder="请输入住址" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
            <input type="hidden" name="url" id="imageUrl">
        </blockquote>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="stStaff">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--
       搜索框的表单
--%>
<br>
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">员工编号</label>
        <div class="layui-input-inline">
            <input type="text" name="staffId" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="staffName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">部门</label>
        <div class="layui-input-inline">
            <select name="deptid" id="selDep" lay-filter="aihao">
                <option value="">请选择部门</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-submit lay-filter="mhSel">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--
    数据表格
--%>
<table class="layui-hide" id="staff" lay-filter="staff"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addSta"><i class="layui-icon">&#xe654;</i></button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon">&#xe669;</i></button>
    </div>
</script>

<script type="text/html" id="barDemo">
    {{#  if(d.roleId == 1){ }}
    <p>最高权限不能修改</p>
    {{#  } else { }}
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        {{#  if(d.status == 1){ }}
            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="job">离职</button>
        {{#  } else { }}
            <button class="layui-btn layui-btn-xs " lay-event="job">入职</button>
        {{#  } }}
    {{#  } }}
</script>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>

<script>
    layui.use(['table','form','layer','jquery','upload','util'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var util = layui.util;

        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '${pageContext.request.contextPath}/staff/upload' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                //上传完毕
                alert(res.url);
                //$("#imgpath").val(res);
                $("#imageUrl").val(res.url);//将上传成功后得到的图片的url返回，并且赋值给表单中隐藏url框
                //alert(res.str);
                layer.msg('上传成功');
                //layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.str);
            }
        });

        /*
        * 把查询到的数据填充到表格中
        * 并把这个表格 封装起来， 方便后面 其他功能 的 调用
        * */
        function showtable(){
            table.render({
                elem: '#staff'
                ,url:'${pageContext.request.contextPath}/staff/selectStaff'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [[
                    /*{type: 'checkbox', fixed: 'left'}
                    ,*/{field:'id', title:'ID', width:80, fixed: 'left', unresize: true,hide:true}
                    ,{field:'staffId', title:'员工编号', width:120}
                    ,{field:'staffName', title:'员工姓名', width:120}
                    ,{field:'password', title:'密码', width:100,hide: true}
                    ,{field:'phone', title:'手机号',width:120}
                    ,{field:'idCard', title:'身份证号', }
                    ,{field:'address', title:'住址', width:120}
                    ,{field:'createdTime', title:'入职时间', width:140/*,templet: function (d) { return util.toDateString(d.createdTime);}*/}
                    ,{field:'resignedTime', title:'离职时间', width:120,hide:true/*,templet: function (d) { return util.toDateString(d.resignedTime);}*/}
                    ,{field:'status', title:'状态', width:120,templet:function (d) {
                            if (d.status == 1){
                                return'<button class="layui-btn layui-btn-xs layui-btn-radius">在职</button>' ;
                            }else {
                                return '<button class="layui-btn layui-btn-xs layui-btn-danger layui-btn-radius">离职</button>';
                            }
                        }
                    }
                    ,{field:'deptid', title:'部门id', width:120,hide:true}
                    ,{field:'dname', title:'部门', width:120}
                    ,{field:'roleId', title:'角色id', width:120,hide:true}
                    ,{field:'rname', title:'职位', width:120}
                    ,{field:'url', title:'路径', width:120,hide:true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true
                ,limit:5
                ,limits:[3,5,9,15]
                ,even:true
            });
        }

        /*
        * 当页面加载时 加载的内容
        * */
        $(function () {
            showtable();
            showrole();
            showdept();
        })

        /*
        * 这是向 职位 下拉框中填充内容
        * */
        function showrole(){
            $.ajax({
                type:'post'
                ,dataType: 'json'
                ,url:'${pageContext.request.contextPath}/role/selectRole'
                ,success:function (data) {
                    var op="";
                    for (var i=0;i<data.length;i++){
                        op +="<option value='"+data[i].rid+"'>"+data[i].rname+"</option>";
                    }
                    $("#selRole").append(op);
                    $("#selRol").append(op);
                    form.render('select');//表单的更新渲染 下拉框
                }
            })
        }

        /*
        * 这是向 部门 下拉框中的填充内容
        * */
        function showdept(){
            $.ajax({
                type:'post'
                ,dataType: 'json'
                ,url:'${pageContext.request.contextPath}/dept/selectDept'
                ,success:function (data) {
                    var op = "";
                    for (var i = 0;i<data.length;i++){
                        op += "<option value='"+data[i].deptid+"'>"+data[i].dname+"</option>"
                    }
                    $("#selDept").append(op);
                    $("#selDep").append(op);
                    form.render('select');//表单的更新渲染 下拉框
                }
            })
        }

        /*
        * 增加 和 修改 的 表单提交事件
        * */
        form.on('submit(stStaff)', function(data){
            $.ajax({
                type:'post'
                ,url:'${pageContext.request.contextPath}/staff/updateAndInsertStaff'
                ,dataType:'json'
                ,data:data.field
                ,success:function (data) {
                    if (data.code == "1001"){
                        layer.closeAll();
                        layer.msg(data.msg, {icon: 1});
                    }else if(data.code == "1002"){
                        layer.closeAll();
                        layer.msg(data.msg, {icon: 5});
                    }else if(data.code == "1003"){
                        layer.msg(data.msg, {icon: 5});
                    }else {
                        layer.msg(data.msg, {icon: 5});
                    }
                    showtable();
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        /*
        * 增加 / 修改 表单 的验证
        * */
        form.verify({
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,sjhm: [
                /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/
                ,'请输入正确的手机号格式'
            ]
            ,idCard: [
                /\d{17}(\d|X|x)/
                ,'请输入正确的身份证格式'
            ]
        });

        /*
        *  搜索框的表单提交事件
        * */
        form.on('submit(mhSel)', function(data){
            //数据表格重载
            table.reload('staff', {
                where: { //设定异步数据接口的额外参数，任意设
                    staffId:data.field.staffId
                    ,staffName:data.field.staffName
                    ,deptid:data.field.deptid
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //头工具栏事件
        table.on('toolbar(staff)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addSta':
                    $("#addOrUpdate")[0].reset();
                    layer.open({
                        type: 1
                        ,area: ['700px', '300px']
                        ,anim:6
                        ,maxmin:true
                        ,content: $('#addOrUpdate') //注意，如果str是object，那么需要字符拼接。
                    });
                    $.ajax({
                        type:'post'
                        ,dataType:'json'
                        ,url:'${pageContext.request.contextPath}/staff/maxStaffId'
                        ,success:function (data) {
                            form.val("addOrUpdate", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                                "staffId": data+1 // "name": "value"
                            });
                        }
                    })
                    break;
                case 'refresh':
                    showtable();
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(staff)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'job'){ //这是对 入职/离职按钮进行操作的
                layer.confirm('确定要入职/离职吗', function(index){
                    $.ajax({
                        type: 'post'
                        ,data:{"id":data.id,"status":data.status}
                        ,dataType:'json'
                        ,url: '${pageContext.request.contextPath}/staff/updateStatus'
                        ,success:function (data) {
                            if (data == "1001"){
                                layer.msg('执行成功', {icon: 1});
                            }else {
                                layer.msg('执行失败', {icon: 5});
                            }
                            showtable();
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                $("#addOrUpdate")[0].reset(); //提前把表格中的内容 清空
                layer.open({
                    type: 1
                    ,area: ['700px', '300px']
                    ,anim:6
                    ,maxmin:true
                    ,content: $('#addOrUpdate') //注意，如果str是object，那么需要字符拼接。
                });
                form.val('addOrUpdate', data); //把点击的这一行的内容添加到表单中
            }
        });
    });
</script>

</body>
</html>